<template>
  <view class="refresh-container">
    <view class="item">
      <view class="label">刷新间隔</view>
      <view class="input">
        <input
          placeholder-class="input-placeholder"
          class="inputValue"
          placeholder="输入1-120之间整数"
          type="text"
          v-model="refreshInterval"
        />
      </view>
      <view class="utils">分钟</view>
    </view>
    <view class="item">
      <view class="label">刷新卡数量</view>
      <view class="input">
        <input
          placeholder-class="input-placeholder"
          class="inputValue"
          placeholder="输入刷新卡数量"
          type="text"
          v-model="refreshNum"
        />
      </view>
      <view class="utils">张</view>
    </view>
    <view class="item">
      <view class="card">
        <view class="title">剩余上刷新卡数量</view>
        <view class="num">{{ num }}张</view>
        <view class="goto"
          >去购买
          <u-icon name="arrow-right" color="#2979ff" size="15"></u-icon>
        </view>
      </view>
    </view>
    <view class="hind">
      如:
      设置10分钟30张，则该帖将每隔10分钟自动刷新一次，直至30张刷新卡全部使用完
    </view>
  </view>
</template>

<script>
export default {
  props: {
    num: {
      type: String,
    },
  },
  data() {
    return {
      refreshInterval: "", //刷新间隔
      refreshNum: "", //刷新数量
    };
  },
};
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  box-sizing: border-box;
  .label {
    font-size: 26rpx;
  }
  .input {
    margin: 10rpx 20rpx;
    width: 300rpx;
    .inputValue {
      background-color: #f2f3f7;
      border-radius: 20rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      height: 60rpx;
    }
    .input-placeholder {
      font-size: 24rpx;
    }
  }
  .utils {
    font-size: 26rpx;
  }
  .card {
    background-color: #ecf2fe;
    border-radius: 10rpx;
    padding: 20rpx;

    box-sizing: border-box;
    display: flex;
    align-items: center;
    .title {
      font-size: 26rpx;
      font-weight: bold;
    }
    .num {
      font-size: 28rpx;
      color: #abb1bd;
      margin: 0 8rpx;
    }
    .goto {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #55a8ea;
      margin-left: 180rpx;
    }
  }
}
.hind {
  font-size: 26rpx;
  padding: 10rpx 40rpx;
  box-sizing: border-box;
  color: #abb1bd;
  letter-spacing: 3rpx;
}
</style>
